import styled from 'styled-components';

type RankItemStyledPropsType = {
  widthPercent: number;
};

export const RankItemStyled = styled.div<RankItemStyledPropsType>`
  margin: 0.8rem auto;
  display: flex;
  height: 2rem;

  .rank-item-left {
    text-align: center;
    color: #fff;
    flex: 1.5;
    img {
      display: block;
      width: 2rem;
      margin: 0 auto;
    }
  }
  .rank-item-middle {
    flex: 7;
    .middle-top {
      color: #fff;
      height: 50%;
      font-size: small;
    }
    .middle-bottom {
      width: ${(props) => `calc(90% * ${props.widthPercent})`};
      height: 36%;
      margin-top: 0.2rem;
      border-radius: 0.6rem;
      background-color: #1989fa;
    }
  }
  .rank-item-right {
    flex: 1.5;
    line-height: 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #00f9f9;
  }
`;
